iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

我與 Blazor 的 30 天系列 第 3

ASP.NET Core Blazor 系列 - 003 專案架構(Blazor WebAssembly)

  • 分享至 

  • xImage
  •  

前言

本篇文章同步發表於 個人部落格 Jim's Blog

在這一章會介紹 Blazor WebAssembly,分別是獨立(Standalone) Blazor WebAssembly和裝載(Hosted) Blazor WebAssembly 兩種範本專案。

環境

Blazor WebAssembly (Standalone)

專案建立與執行

  1. 首先開啟 Visual Studio 2022,找到 Blazor WebAssembly 應用程式

Visual Studio 2022 選取Blazor WebAssembly 應用程式

  1. 在設定完專案名稱和路徑後,在其他資訊的選單可以做選擇是否要裝載在 ASP.NET Core 上(Hosted),以及是否在啟用PWA的支援

Visual Studio 專案其他參數設定頁面

  1. 專案建立完成後也是一樣點擊最上方長得像播放按鈕的開始偵錯,讓專案跑起來

Visual Studio 2022  偵錯按鈕位置

  1. 建置完成就會又看見熟悉的 Hello World! 但是仔細看會發現一個不一樣的地方
  • Loading 會發現最一開始比起 Blazor Server 多了 Loading 頁面

Loading 頁面

  • Home

Blazor 首頁

  • Counter

Blazor Counter頁面

  • FetchData

Blazor FetchData頁面

其餘的頁面皆相同

專案結構(Standalone)

接下來我們將目光移到VS內的方案總管

Blazor Server Vs Blazor Wasm

Blazor Server 的部分已經分享過了,這次依照兩者的相異之處說明

1. wwwroot 異動

  • 原有的根頁面 從 _Host.cshtml 被 index.html取代
  • 元件轉譯的位置在<div id="app"></div>的位置

2. Data 移除

  • 原有的邏輯寫入頁面內部

3. Pages 異動

  • _Host.cshtml 被index.html取代移除
  • _Layout.cshtml 因為沒有了_Host.cshtml故也不存在,head 內容也轉移至 index.html

4. Properties 特別說明

Blazor Wasm launchSettings.json

  • 在launchSettings.json檔案內,會多一行 inspectUrl 屬性,這個屬性的功能有以下兩個
    1.讓 IDE 偵測應用程式是否為 Blazor WebAssembly 應用程式
    2.指示腳本偵錯基礎結構透過 Blazor 的偵錯 Proxy 連線到瀏覽器

6. Other

剩下的是沒有在資料夾內的檔案

其他檔案

  • appsetting.json 此檔案不再wasm範本中
  • Program.cs 設定 WebAssembly 主機的應用程式進入點,可以設定根元件以及要渲染的標籤

Blazor WebAssembly (Hosted) 專案

專案建立與執行

  1. 步驟大致上相同,只需在建立專案時,額外勾選裝載在ASP.NET Core上即可

勾選裝載在ASP.NET Core

  1. 在方案總管中會有兩個 Web 的專案,請啟動 Server 的專案,Client不需要啟動

選取 Server 專案

當初我以為要啟動兩個專案,在設定啟動專案的視窗把兩個Web專案都勾選啟動
方案屬性頁勾選兩個啟動專案
這樣做會看到 Socket Exception 告訴你Port被佔用了
SocketException

專案結構(Hosted)

Blazor WebAssembly 專案結構

預設的專案範本有建立了三個專案,Client、Server、Shared

1. Client

與上面的 Standalone 差不多,在 FetchData 元件內部有稍微不同

  • Standalone FetchData.razor
protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
  • Hosted FetchData.razor
protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
    }

GetFromJsonAsync 的方法參數不同

2. Server

看是一個 ASP.NET Core 的 Web 專案

  • 專案內沒有 wwwroot 資料夾
  • Program.cs 的內容稍微與平常看到的不一樣
app.UseBlazorFrameworkFiles();
app.MapFallbackToFile("index.html");

3. Shared

是用來存放共用類別的地方

運作方式

Blazor WebAssembly 是透過 WebAssembly 在瀏覽器端執行 .NET 程式碼,在網頁開啟時將會載入相關的 .NET 組件,其中包含相對應的 RunTime

瀏覽器端的Console

在Console中看見負責處理的檔案是blazor.webassembly.js

Blazor Server,UI需要透過SignalR來與伺服端通訊和更新,在Blazor WebAssembly則不需要,所以比較不會有延遲的問題產生

小結

Blazor Webassembly 本質上是一系列的檔案以及Javascript檔案,所以只要檔案可以正確地被載入並且瀏覽器支援WebAssembly,網頁就可以運作,所以 Blazor WebAssembly App 不必是 ASP.NET Core 網站,他可以是純HTML,甚至透過CDN來部署

這邊總結一下我認為什麼時候選擇 獨立(Standalone) 什麼時候選擇 裝載(Hosted)

若是你在開發Blazor WebAssembly App 的同時,使用 ASP.NET Core 撰寫後端,則可以使用同一個網站來做部署,這種情況可以直接使用裝載(Hosted)進行開發 ;如果你已有現有的第三方API或是 .NET Framework 既有的 Web API,可以直接使用獨立(Standalone) Blazor WebAssembly 開發

Blazer WebAssembly 可以開發成完全不需要外部服務的應用程式,但可能為了安全性會想額外寫一個外部應用程式開放API,用來讀取資料庫、進行使用者驗證等等行為。

專案範本的裝載(Hosted) 在 ASP.NET Core 上是指透過 ASP.NET Core 來開發外部應用程式(念起來很繞口)

優點

  1. 載入完成後可以離線使用
  2. 運算負載會轉移到客戶端

缺點

  1. 瀏覽器需要支援 WebAssembly,需注意瀏覽器
  2. 載入時間會依應用程式複雜度增加而增加

上一篇
ASP.NET Core Blazor 系列 - 002 專案架構(Blazor Server)
下一篇
ASP.NET Core Blazor 系列 - 004 元件(Componet) 概觀
系列文
我與 Blazor 的 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言